<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edge浏览器视频播放器测试</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            padding: 20px;
            background: #f0f0f0;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .video-test {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background: #f9f9f9;
        }
        .video-player {
            position: relative;
            width: 100%;
            background: #000;
            border-radius: 10px;
            overflow: hidden;
        }
        .video-player video {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 10px;
            background: #000;
            position: relative;
            z-index: 1;
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            appearance: none;
        }
        
        /* 确保没有遮罩层干扰 */
        .video-player::before,
        .video-player::after {
            display: none !important;
        }
        
        /* 移除任何可能的遮罩层 */
        .video-overlay,
        .play-overlay,
        .overlay {
            display: none !important;
        }
        
        /* Edge 浏览器兼容性 */
        .video-player video::-ms-media-controls {
            background: transparent;
        }
        
        .video-player video::-ms-media-controls-panel {
            background: transparent;
            border-radius: 5px;
            margin: 10px;
        }
        
        /* Edge 播放按钮样式 */
        .video-player video::-ms-media-controls-play-button {
            background: rgba(0, 123, 255, 0.9) !important;
            border-radius: 50% !important;
            color: white !important;
            border: 2px solid white !important;
            width: 40px !important;
            height: 40px !important;
            margin: 5px !important;
            position: relative !important;
            display: block !important;
        }
        
        .video-player video::-ms-media-controls-play-button::before {
            content: "▶" !important;
            font-size: 16px !important;
            color: white !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            height: 100% !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            z-index: 10 !important;
        }
        
        /* Edge 暂停按钮样式 */
        .video-player video::-ms-media-controls-pause-button {
            background: rgba(0, 123, 255, 0.9) !important;
            border-radius: 50% !important;
            color: white !important;
            border: 2px solid white !important;
            width: 40px !important;
            height: 40px !important;
            margin: 5px !important;
            position: relative !important;
            display: block !important;
        }
        
        .video-player video::-ms-media-controls-pause-button::before {
            content: "⏸" !important;
            font-size: 16px !important;
            color: white !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            height: 100% !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            z-index: 10 !important;
        }
        
        /* Edge 全屏按钮样式 */
        .video-player video::-ms-media-controls-fullscreen-button {
            background: rgba(255, 255, 255, 0.8) !important;
            border-radius: 50% !important;
            width: 30px !important;
            height: 30px !important;
            margin: 5px !important;
            position: relative !important;
            display: block !important;
        }
        
        .video-player video::-ms-media-controls-fullscreen-button::before {
            content: "⛶" !important;
            font-size: 14px !important;
            color: #333 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            height: 100% !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            z-index: 10 !important;
        }
        
        /* Edge 静音按钮样式 */
        .video-player video::-ms-media-controls-mute-button {
            background: rgba(255, 255, 255, 0.8) !important;
            border-radius: 50% !important;
            width: 30px !important;
            height: 30px !important;
            margin: 5px !important;
            position: relative !important;
            display: block !important;
        }
        
        .video-player video::-ms-media-controls-mute-button::before {
            content: "🔊" !important;
            font-size: 12px !important;
            color: #333 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            height: 100% !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            z-index: 10 !important;
        }
        
        /* Edge 静音状态图标 */
        .video-player video::-ms-media-controls-mute-button[aria-label*="取消静音"]::before {
            content: "🔇" !important;
        }
        
        /* Edge 时间显示样式 */
        .video-player video::-ms-media-controls-current-time-display,
        .video-player video::-ms-media-controls-time-remaining-display {
            color: white !important;
            font-size: 12px !important;
            font-weight: bold !important;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
        }
        
        /* Edge 进度条样式 */
        .video-player video::-ms-media-controls-timeline {
            background: rgba(255, 255, 255, 0.3) !important;
            border-radius: 2px !important;
            height: 4px !important;
        }
        
        /* Edge 音量控制样式 */
        .video-player video::-ms-media-controls-volume-slider {
            background: rgba(255, 255, 255, 0.3) !important;
            border-radius: 2px !important;
            height: 4px !important;
        }
        
        /* Edge 浏览器特殊处理 */
        .video-player video::-ms-media-controls-enclosure {
            background: transparent !important;
        }
        
        .video-player video::-ms-media-controls-overlay-play-button {
            display: none !important;
        }
        
        /* 确保Edge中的按钮可见 */
        .video-player video::-ms-media-controls-button {
            display: block !important;
            position: relative !important;
            z-index: 10 !important;
        }
        
        .test-info {
            margin-top: 15px;
            padding: 10px;
            background: #e7f3ff;
            border-radius: 5px;
            font-size: 14px;
        }
        
        .browser-info {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Edge浏览器视频播放器测试</h1>
        
        <div class="browser-info">
            <strong>浏览器检测：</strong>
            <span id="browser-info">正在检测...</span>
        </div>
        
        <p>这个页面专门用于测试Edge浏览器中的视频播放器图标显示问题。</p>
        
        <div class="video-test">
            <h3>测试视频: test.mp4</h3>
            <div class="video-player">
                <video controls poster="images/video-thumb1.jpg">
                    <source src="videos/test.mp4" type="video/mp4">
                    您的浏览器不支持视频播放。
                </video>
            </div>
            <div class="test-info">
                <strong>Edge浏览器检查项目：</strong><br>
                ✓ 播放按钮图标是否显示 (▶)<br>
                ✓ 暂停按钮图标是否显示 (⏸)<br>
                ✓ 全屏按钮图标是否显示 (⛶)<br>
                ✓ 静音按钮图标是否显示 (🔊)<br>
                ✓ 是否有半透明遮罩层<br>
                ✓ 视频控件是否正常显示<br>
                ✓ 点击播放按钮是否能正常播放
            </div>
        </div>
        
        <div class="test-info" style="margin-top: 30px;">
            <h3>Edge浏览器问题排查：</h3>
            <ul>
                <li>如果播放按钮图标不显示，可能是Edge的媒体控件样式覆盖了我们的CSS</li>
                <li>Edge浏览器对媒体控件的样式支持可能有限</li>
                <li>建议检查Edge浏览器的开发者工具，查看CSS是否被正确应用</li>
                <li>如果问题持续，可能需要使用JavaScript动态添加图标</li>
            </ul>
        </div>
    </div>

    <script>
        // 检测浏览器
        function detectBrowser() {
            const userAgent = navigator.userAgent;
            let browserInfo = '';
            
            if (userAgent.indexOf('Edge') > -1) {
                browserInfo = 'Microsoft Edge';
            } else if (userAgent.indexOf('Chrome') > -1) {
                browserInfo = 'Google Chrome';
            } else if (userAgent.indexOf('Firefox') > -1) {
                browserInfo = 'Mozilla Firefox';
            } else if (userAgent.indexOf('Safari') > -1) {
                browserInfo = 'Safari';
            } else {
                browserInfo = '未知浏览器';
            }
            
            document.getElementById('browser-info').textContent = browserInfo;
        }
        
        // 视频播放增强功能
        function initVideoEnhancements() {
            const videos = document.querySelectorAll('video');
            
            videos.forEach(video => {
                // 确保视频控件正常显示
                video.controls = true;
                video.preload = 'metadata';
                
                // 移除可能的遮罩层
                const overlays = video.parentNode.querySelectorAll('.video-overlay, .play-overlay');
                overlays.forEach(overlay => overlay.remove());
                
                // 添加视频加载错误处理
                video.addEventListener('error', function() {
                    console.log('视频加载失败:', this.src);
                    this.style.display = 'none';
                    const errorMsg = document.createElement('div');
                    errorMsg.style.cssText = `
                        width: 100%;
                        height: 200px;
                        background: #f0f0f0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #666;
                        font-size: 14px;
                        border-radius: 10px;
                    `;
                    errorMsg.textContent = '视频加载失败，请检查文件路径';
                    this.parentNode.insertBefore(errorMsg, this);
                });
                
                // 添加视频播放统计
                video.addEventListener('play', function() {
                    console.log('视频开始播放:', this.src);
                    // 确保播放时移除任何遮罩
                    const overlays = this.parentNode.querySelectorAll('.video-overlay, .play-overlay');
                    overlays.forEach(overlay => overlay.style.display = 'none');
                });
                
                // 添加视频结束事件
                video.addEventListener('ended', function() {
                    console.log('视频播放结束:', this.src);
                });
                
                // 添加视频加载完成事件
                video.addEventListener('loadedmetadata', function() {
                    console.log('视频元数据加载完成:', this.src);
                });
                
                // 确保视频控件可见
                video.addEventListener('loadeddata', function() {
                    this.style.opacity = '1';
                });
            });
            
            // 移除页面中可能存在的遮罩层
            const allOverlays = document.querySelectorAll('.video-overlay, .play-overlay, .overlay');
            allOverlays.forEach(overlay => {
                if (overlay.style.position === 'absolute' || overlay.style.position === 'fixed') {
                    overlay.remove();
                }
            });
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            detectBrowser();
            initVideoEnhancements();
        });
    </script>
</body>
</html>
